<template>
	<view>
		<view class="header">
			<view class="w-670 ">博时黄金</view>
		</view>
		<view class="mid w-670">
			<view class="mid-l">卖出克数</view>
			<view class="mid-r">交易规则</view>
		</view>
		<view class="all w-670">
			<view class="all-l ">
				<input @input="priceTap" class="input" type="number" v-model="val" placeholder="最多可卖出2.00克"
					:class="[val?'input':'pld']" />
			</view>
			<view class="all-r ">全部</view>
		</view>
		<view class="footer ">
			<view class="w-670">预计将于03月30日到账,资金将会自动转入我的钱包,卖出费率:0.00~1.50%(手续费详见交易规则)</view>
		</view>
		<view class="w-670 btn">
			<button type="default" class="item" :class="[(val>0&&val<=2)?'after':'before']" @tap="buy">确定</button>
		</view>

		<!-- 支付组件 -->
		<unik-modal ref="unikModal" :modalTitle="modalTitle" @confirmModal="confirmModal" @cancelModal="cancelModal">
			<text>{{info}}</text>
		</unik-modal>
		<!-- 支付组件 -->
		<payPass ref="verify" @finish="getCode"></payPass>
	</view>
</template>

<script>
	// 支付
	import payPass from '@/components/pay-pass/pay-pass.vue'
	export default {
		components: {
			payPass
		},
		data() {
			return {
				val: ''
			}
		},
		methods: {
			getCode(e) {
				console.log(e); //输入内容
			},
			yzbtn() {
				this.$refs.verify.show();
			},
			// 只有input有值的时候才能打开支付
			buy() {
				if (this.val > 0 && this.val <= 2) {
					this.yzbtn()
				}
			},
			priceTap() {
				this.val = this.val.replace(/[^\d\.]|^\./g, '').replace(/\.{2}/g, '.').replace(
					/^([1-9]\d*|0)(\.\d{1,2})(\.|\d{1})?$/, '$1$2').replace(/^0\d{1}/g, '0');
			}




		}
	}
</script>
<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style scoped lang="scss">
	.header {
		font-size: 32rpx;
		font-weight: bold;
		padding: 24rpx 0;
		color: #323232;
		border: 1px solid #E6E6E6;

	}

	.mid {
		margin-top: 48rpx;
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;

		.mid-l {
			color: #474747;
		}

		.mid-r {
			color: #9A9A9A;
		}
	}

	.all {
		height: 150rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 48rpx;

		.all-l {
			width: 80%;

			.input {
				height: 138rpx;
				font-size: 72rpx;
				font-weight: bold;
				color: #323232;
			}

			.pld {
				color: #C7C7C7;
				font-weight: 300;
				font-size: 32rpx;
			}
		}

		.all-r {
			width: 10%;
			color: #474747;
			font-size: 24rpx;

		}
	}

	.footer {
		height: 164rpx;
		font-size: 24rpx;
		color: #474747;
		display: flex;
		align-items: center;
		border-top: 1px solid #E6E6E6;

	}

	.btn {
		margin-top: 48rpx;
		background: #F8F7F7;

		.item {
			color: white;
		}

		.before {
			background: #BEDDF2;
		}

		.after {
			background: #205FE6;
		}
	}
</style>
